<template>
	<div class="mb16">
		<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;" /></button>
		<div class="ml1">
			<el-input type="text" v-model="form.ss" maxlength="20" placeholder="输入地址/房号/电话/姓名" class="el-input" />
			<el-button type="primary"
				style="height: 40px; background-color: white;color: black; border: none;" @click="loadHold">搜索</el-button>
		</div>
	</div>
	<div class="xiala_3" v-show="showXiala">
		<form>
			<el-form-item label="住户身份" class="xz">
				<el-select v-model="form.bindingDetails" placeholder="请选择住户身份">
					<el-option label="业主" value="业主"></el-option>
					<el-option label="家属" value="家属"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="住户标签" class="xz">
				<el-select v-model="form.identityLabel" placeholder="请选择房屋标签">
					<el-option v-for="item in data.biaoqian" :key="item.identityLabel" :label="item.identityLabel" :value="item.identityLabel"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="住户生日月" class="xz">
				<el-col :span="11">
					<el-date-picker v-model="form.birthday"  value-format="YYYY-MM" type="month" placeholder="生日日期" style="width: 200px" />
				</el-col>
			</el-form-item>
			<el-button class="btn1_2" @click="reset">重置</el-button><el-button class="btn2_2" @click="loadHold">查询</el-button>
		</form>
	</div>
	<div class="buttom">
		<div class="b_top">
			<el-button class="btn3" @click="AddHousehold">住户登记</el-button>
			<el-popover placement="bottom" :width="200" trigger="hover" class="el-popover">
				<template #reference>
					<el-button class="m-2">更多</el-button>
				</template>

				<div slot="content" style="margin: 0px;">
					<ul class="u1">
						<li>批量导入</li>
						<li>导出数据</li>
						<li>批量修改房屋信息</li>
					</ul>
				</div>
			</el-popover>
		</div>
		<el-table :data="data.hold" style="width: 100% padding: 10px;">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="householdName" label="住户姓名" width="200" />
			<el-table-column prop="householdPhone" label="住户电话" width="200" />
			<el-table-column prop="bindingDetails" label="绑定房屋/住户身份" width="230px" />
			<el-table-column prop="identityLabel" label="身份标签" width="200" />
			<el-table-column prop="birthday" label="住户生日" width="300" />
			<el-table-column prop="" label="操作">
				<template #default="scope">
					<el-button link type="primary" @click="showDrawer(scope.row)">
						住户详情
					</el-button>
					<el-popconfirm
					    confirm-button-text="是"
					    cancel-button-text="否"
					    icon-color="#626AEF"
					    title="确定要删除吗"
					    @confirm="delHold(scope.row.householdId)"
					  >
					    <template #reference>
					      <el-button link type="primary">删除</el-button>
					    </template>
					  </el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer
		    v-model="drawer"
			title="用户详情"
		  >
		    <form>
		          <el-form-item label="住户姓名">
		             <el-input v-model="currentHold.householdName" />
		          </el-form-item>
		          <el-form-item label="住户电话">
		             <el-input v-model="currentHold.householdPhone" />
		          </el-form-item>
		          <el-form-item label="绑定房屋/住户身份">
		             <el-input v-model="currentHold.bindingDetails" />
		          </el-form-item>
		          <el-form-item label="身份标签">
		             <el-input v-model="currentHold.identityLabel" />
		          </el-form-item>
		          <el-form-item label="住户生日">
		             <el-date-picker v-model="currentHold.birthday" type="month" style="width: 200px" />
		          </el-form-item>
		       </form>
			   <el-button @click="updateHold">修改</el-button>
			   <el-button @click="drawer=false">取消</el-button>
		  </el-drawer>
	</div>
	<div class="demo-pagination-block">
		<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
			:page-sizes="[5, 15, 25, 35]" :size="size" :disabled="disabled" :background="background"
			layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		ElTable
	} from 'element-plus';
	import {
		useRouter
	} from 'vue-router'
	import $http from '../router/AxiosApi';
	import type {
		ComponentSize
	} from 'element-plus'
	const drawer = ref(false)
	const currentPage4 = ref(0)
	const pageSize4 = ref(0)
	const size = ref < ComponentSize > ('default')
	const background = ref(false)
	const disabled = ref(false)
	// 定义响应式变量
	const showXiala = ref(false);
	const router = useRouter()
	const page = ref(1)
	const pageSize = ref(5)
	const currentHold=reactive({
		householdName:'',
		householdPhone:'',
		bindingDetails:'',
		birthday:'',
		identityLabel:'',
		householdId:''
	});
	const total = ref(0)
	const handleSizeChange = (val: number) => {
		pageSize.value = val;
		loadHold(page, pageSize);
	}
	const handleCurrentChange = (val: number) => {
		page.value = val;
		loadHold(page, pageSize);
	}
	// 定义函数来切换显示状态
	const showClick = () => {
		console.log("aaa");
		showXiala.value = !showXiala.value;
	};

	const AddHousehold = () => {
		router.push({
			name: 'AddHousehold'
		});
	}

	const data = reactive({
		hold: [],
		biaoqian:[]
	})
	const form=reactive({
		bindingDetails:'',
		identityLabel:'',
		birthday:'',
		ss:''
	})
	onMounted(() => {
		loadHold()
		loadBiaoQian()
	})
	const reset=()=>{
		 for (let key in form) {
		        form[key] = ''; // 将每个属性设置为空字符串
		    }
		loadHold()
	}
	const loadHold = () => {
		console.log(form.birthday)
		$http.post(`findAllHousehold?currentPage=${page.value}&PageSize=${pageSize.value}`,form).then((res) => {
			console.log(res.data)
			data.hold = res.data.data.list
			total.value = res.data.data.total
			currentPage4.value = res.data.data.pageNum
			pageSize4.value = res.data.data.pageSize
		})
	}
	
	const showDrawer=(row)=>{
		currentHold.householdName=row.householdName
		currentHold.householdPhone=row.householdPhone
		currentHold.bindingDetails=row.bindingDetails
		currentHold.birthday=row.birthday
		currentHold.identityLabel=row.identityLabel
		currentHold.householdId=row.householdId
		drawer.value=true;
	}
	
	const updateHold=()=>{
		console.log(currentHold)
		$http.put("updateHold",currentHold).then((res)=>{
			console.log(res.data)
			drawer.value=false
			loadHold()
		})
	}
	const delHold=(id)=>{
		console.log(id)
		$http.delete(`delHold?householdId=${id}`).then((res)=>{
			console.log(res.data)
			loadHold()
		})
	}
	const loadBiaoQian=()=>{
		$http.post("findBiaoQian").then((res)=>{
			console.log(res.data)
			data.biaoqian=res.data
		})
	}
</script>

<style>
	.example-showcase .el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	.xiala_3 {
		background-color: white;
		width: 1327px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
	}

	.xz {
		width: 300px;
		float: left;
		margin-bottom: 0;
		margin-right: 32px;
		height: 56px;
		align-items: center;
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.btn1_2 {
		position: relative;
		bottom: -15px;
		right: -100px;
		width: 100px;
		height: 40px;
		color: #7e8081;
		background-color: #fafafa;
		border: none;
		font-size: 14px;
		padding: 10px;
	}

	.btn2_2 {
		position: relative;
		bottom: -15px;
		right: 130px;
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
	}

	.gjsx {
		background-color: white;
		padding: 10px 15px;
	}

	.mb16 {
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
		width: 1370px;
	}

	.ml1 {
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;
	}

	.el-input {
		width: 240px;
		height: 40px;
		line-height: 40px;
		border: none;
	}

	.u1 {
		margin: 0px;
		padding: 0px;
	}

	.u1>li {
		list-style: none;
		line-height: 20px;
		height: 25px;
		line-height: 190%;
		text-align: left;
		padding: 5px 10px;
		cursor: pointer;
	}

	.u1>li:hover {
		background-color: #d3ffe2;
		/* 鼠标悬浮时的背景色 */
		color: #00bd00;
	}

	.el-popover {
		padding: 0px !important;
	}

	.buttom {
		background-color: white;
		padding: 10px;
	}

	.btn3 {
		width: 100px;
		height: 40px;
		color: #fff;
		background-color: #00c36d;
		border-color: #00c36d;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.b_top {
		display: flex;
		justify-content: space-between;
	}

	.m-2 {
		padding: 10px 20px;
		align-items: center;
		background-color: #fafafa;
		border: none;
		height: 40px;
		width: 80px;

	}
</style>